<template>
  <div class="zn-wrapper">
    <div class="zn-op-header">
      <el-button type='primary' size="small" icon="el-icon-plus" @click="addClick">{{$t('common.add')}}</el-button>
    </div>
    <div class="zn-search-header">
      <el-input :placeholder="$t('common.search')" v-model="key" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="searchClick"></el-button>
      </el-input>
    </div>
    <div class="zn-main">
      <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" v-show="tableHeaderData.hasSelection">
        </el-table-column>
        <el-table-column v-for="header in tableHeaderData.data" :key="header.prop" :label="header.label" :prop="header.prop">
          <template slot-scope="scoped">
            <div>
              {{scoped.row[header.prop]}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scoped">
            <div>
              <el-button type="primary" size="small" @click="checkClick(scoped.row,scoped.$index)">{{$t('common.view')}}</el-button>
              <el-button type="success" size="small" @click="editClick(scoped.row,scoped.$index)">{{$t('common.edit')}}</el-button>
              <el-button type="danger" size="small" @click="deleteClick(scoped.row,scoped.$index)">{{$t('common.del')}}</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="zn-table-foot clearfix">
        <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 弹出新增框 -->
    <el-dialog :title="$t('common.add')" :visible.sync="addModel">
      <el-form label-width="80px">
        <el-form-item v-for="(item,index) in tableHeaderData.data" :key="index" :label="item.label">
          <el-input v-model="addObj[item.prop]"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addModel = false">{{$t('common.cancel')}}</el-button>
        <el-button type="primary" @click="addData">{{$t('common.confirm')}}</el-button>
      </span>
    </el-dialog>

    <!-- 弹出查看框 -->
    <el-dialog :title="$t('common.view')" :visible.sync="checkModel">
      <el-form label-width="80px">
        <el-form-item v-for="(item,index) in tableHeaderData.data" :key="index" :label="item.label">
          <label for="">{{checkObj[item.prop]}}</label>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="checkModel = false">{{$t('common.cancel')}}</el-button>
        <el-button type="primary" @click="checkModel = false">{{$t('common.confirm')}}</el-button>
      </span>
    </el-dialog>

    <!-- 弹出编辑框 -->
    <el-dialog :title="$t('common.edit')" :visible.sync="editModel">
      <el-form label-width="80px">
        <el-form-item v-for="(item,index) in tableHeaderData.data" :key="index" :label="item.label">
          <el-input v-model="editObj[item.prop]"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editModel = false">{{$t('common.cancel')}}</el-button>
        <el-button type="primary" @click="editData">{{$t('common.confirm')}}</el-button>
      </span>
    </el-dialog>

    <!-- 删除确认框 -->
    <el-dialog :title="$t('common.del')" :visible.sync="delModel" width="30%">
      <span>{{$t('common.delTip')}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delModel = false">{{$t('common.cancel')}}</el-button>
        <el-button type="primary" @click="delData">{{$t('common.confirm')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { tableHeaderData, tableData } from "./data";
//import { carousels } from "@/api/carousel.js";
export default {
  data() {
    return {
      tableData: [],
      tableHeaderData: {},
      addModel: false, //是否显示添加模态框
      checkModel: false, //是否显示查看模态框
      editModel: false, //是否显示编辑模态框
      delModel: false, //删除确认
      addObj: {}, //当前添加对象
      checkObj: {}, //当前查看对象
      editObj: {}, //当前编辑对象
      delObj: {}, //当前删除的对象
      key: "", //搜索关键字
      currentPage: 1,
      pageSize: 10,
      total: 100
    };
  },
  mounted() {
    // 调接口拿数据
    carousels().then(res=>{
    })
    this.tableData = tableData;
    this.tableHeaderData = tableHeaderData;
  },
  methods: {
    handleSelectionChange() {},
    // 添加click
    addClick() {
      this.addModel = true;
    },
    // 查看click
    checkClick(data, index) {
      this.checkObj = data;
      this.checkModel = true;
    },
    // 编辑click
    editClick(data, index) {
      this.editObj = data;
      this.editModel = true;
    },
    // 删除click
    deleteClick(data, index) {
      this.delObj = data;
      this.delModel = true;
    },
    handleCurrentChange(pageNo) {
      console.log(pageNo);
    },

    // 添加数据
    addData() {
      this.addModel = false;
      console.dir(this.addObj);
    },
    // 编辑数据
    editData() {
      this.editModel = false;
      console.dir(this.editObj);
    },
    // 删除数据
    delData() {
      this.delModel = false;
    },
    // search
    searchClick() {
      console.log(this.key);
    }
  }
};
</script>

<style scoped>
.zn-search-header {
  padding: 20px 0;
}
.good-detail {
  position: relative;
  padding-left: 80px;
  min-height: 80px;
}
.good-detail .good-pic {
  position: absolute;
  left: 0;
  top: 0;
}
.good-detail .good-pic img {
  height: 80px;
  width: 80px;
  padding: 1px;
  border: 1px solid #efefef;
}
.good-detail .good-content {
  width: 260px;
  padding: 10px;
}
.input-with-select {
  width: 300px;
}
</style>

<style>
.zn-main .el-table__header-wrapper .cell {
  font-weight: normal;
  color: #000;
}
</style>

